<template>
  <div class="checking-page">
    <div class="topHead">
      <img src="../../../../../assets/images/img_detailse_pass.png" alt="">
      <span>您的公司资料已提交客服审核,请稍加等候</span>
    </div>
    <div class="reg-info-box tab-card ">
      <div class="title"><i class="icon maliiconfont maliicon-img_register_complet"></i>公司资料</div>
      <ul>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_navigation_entre"></i><span>身份</span></p>
          <p class="p-overflow" v-if="detailData.companyType == 1 || detailData.companyType == 2" title="货主">货主</p>
          <p v-else class="p-overflow" :title="detailData.companyTypeDesc">{{detailData.companyTypeDesc}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_registra"></i><span>联系人姓名</span></p>
          <p class="p-overflow" :title="detailData.contactName">{{detailData.contactName}}</p>
        </li>
        <li class="border-right-none">
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>联系人号码</span></p>
          <p class="p-overflow" :title="detailData.contactPhone">{{detailData.contactPhone}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_custodia"></i><span>公司性质</span></p>
          <p v-if="detailData.companyNature !== '' " class="p-overflow" :title="detailData.companyNature">{{detailData.companyNature}}</p>
          <p v-else>未填</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>法人姓名</span></p>
          <p v-if="detailData.legalPerson !== '' " class="p-overflow" :title="detailData.legalPerson">{{detailData.legalPerson}}</p>
          <p v-else>未填</p>
        </li>
        <li class="border-right-none">
          <p class="card-title"><i class="icon maliiconfont maliicon-img_navigation_organ"></i><span>公司全称</span></p>
          <p class="p-overflow" :title="detailData.companyName">{{detailData.companyName}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_register_cellpho"></i><span>固定电话</span></p>
          <p v-if="detailData.telephone !=='' " class="p-overflow" :title="detailData.telephone">{{detailData.telephone}}</p>
          <p v-else>未填</p>
        </li>
        <li style="width:66.67%" class="border-right-none">
          <p class="card-title"><i class="icon maliiconfont maliicon-img_detailse_source"></i><span>公司地址</span></p>
          <p class="p-overflow2" :title="detailData.provinceName+'/'+detailData.provinceName+'/'+detailData.cityName+'/'+detailData.areaName+'/'+detailData.detailAddress">{{detailData.provinceName}}/{{detailData.cityName}}/{{detailData.areaName}}/{{detailData.detailAddress}}</p>
        </li>
        <li class="img-item">
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_license"></i><span>营业执照</span></p>
          <div class="content-right fl">
            <p>{{detailData.busLicense}}</p>
            <img @click="handlePreview(detailData.busLicenseImg)" :src="detailData.busLicenseImg"  alt="">
            <p class="title-img">营业执照照片</p>
          </div>
        </li>
        <li class="img-item border-right-none">
          <p class="card-title"><i class="icon maliiconfont maliicon-shenfenzheng"></i><span>法人身份证号</span></p>
          <div class="content-right">
            <p v-if="detailData.legalIdCard !== '' ">{{detailData.legalIdCard}}</p>
            <p v-else>未填</p>
            <div class="fl" v-if="detailData.legalFaceIdImg" style="margin-right: 20px">
              <img @click="handlePreview(detailData.legalFaceIdImg)"  :src="detailData.legalFaceIdImg"  alt="">
              <p class="title-img">身份证正面照</p>
            </div>
            <div class="fl" v-if="detailData.legalBackIdImg">
              <img @click="handlePreview(detailData.legalBackIdImg)" class="title-img" :src="detailData.legalBackIdImg"  alt="">
              <p class="title-img">身份证反面照</p>
            </div>
          </div>
        </li>
      </ul>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default{
    mounted () {
      this.getCompanyInitData();
    },
    data () {
      return {
        detailData: {},
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      getCompanyInitData() {
        let that = this;
        that.$http({
          method: 'GET',
          url: '/maliwms/company/getCompanyByCurrentUser'
        }).then((res) => {
          if (res.code === 200) {
            this.detailData = res.result;
          }
        });
      },
      handlePreview(file) {
        this.dialogImageUrl = file;
        this.dialogVisible = true;
      }
    }
  };
</script>
<style>
  body{
    background: #f5f7fb;
  }
  .reg-info-box{
    width: 800px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    overflow: hidden;
  }
  .reg-info-box .title {
    font-size: 16px;
    color: #333;
    line-height: 60px;
    position: relative;
    padding-left: 20px;
    border-bottom:1px solid #e5e5e5;
    height: 60px;
  }
  .reg-info-box .title i {
    padding-right: 10px;
  }
  .topHead {
    border: 1px solid #e5e5e5;
    background: #fff;
    width: 800px;
    height: 68px;
    line-height: 68px;
    margin-top: 30px;
    margin-left: 51px;
  }
  .topHead img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    margin-left: 20px;
    vertical-align: middle;
  }
  .topHead span {
    font-size: 16px;
    color: #333;
    vertical-align: middle;
  }
  .tab-card ul li {
    width: 33.333333333%;
    height: 100px;
    box-sizing: border-box;
    float: left;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 18px;
    background: #fff;
  }
  .checking-page .tab-card ul li:last-child{
    border-bottom:none;
  }
  .tab-card ul li .card-title {
    margin-bottom: 10px;
  }
  .tab-card i.icon.maliicon-img_details_license{
    font-size:26px;
  }
  .tab-card i.icon {
    color: #ff6c2b;
    font-size: 18px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .tab-card i.icon {
    font-size: 20px;
  }
  .tab-card ul li .card-title span {
    color: #808080;
    vertical-align: middle;
    font-size: 14px;
  }
  .img-item {
    width: 100%!important;
    height: auto!important;
  }
  .img-item img {
    width: 200px;
    height: 120px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .content-right {
    padding-left: 28px;
  }
  .fl {
    float: left;
  }
  .content-right .title-img {
    margin-bottom: 20px;
    color: #808080;
    font-size: 14px;
    text-align: center;
  }
  .content-right .title-img {
    margin-bottom: 20px;
    color: #808080;
    font-size: 14px;
    text-align: center;
  }
  .tab-card ul li.border-right-none{
    border-right:none;
  }
  p{
    font-size:14px;
    margin-top:4px;
  }
</style>
